<template>
  <div>
    <!-- 自定义指令 指令都是以v-开头的属性 -->
    <h6 v-color>我是一个标题1</h6>
    <h6 v-color>我是一个标题2</h6>
    <h3 v-color v-font>我是一个标题3</h3>
    <hr />
    <h3 v-color.my="'blue'">我是一个标题--blue</h3>
    <h3 v-color.my="'green'">我是一个标题--blue</h3>

    <hr />
    <input v-if="show" type="title" v-focus v-model="username" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      show: true,
    };
  },
  // 局部指令
  directives: {
    // 定义，使用时，指令调用名为 v-color, 对象
    color: {
      // 钩子函数
      // 第1次执行时，会执行
      // bind 第一次绑定到元素时调用，初始和标签绑定时调用  去北京 -> 已购买火车票  最新执行
      // el当前元素的dom
      bind(el, bindings) {
        // console.log("111");
        // console.log(bindings);
        if (bindings.modifiers.my) {
          el.style.color = bindings.value;
        } else {
          el.style.color = "red";
        }
      },
      // 当前被绑定元素插入父节点时调用，已经在页面中存在 -- 元素已经在页面存在才触发，场景
      // 已经到北京
      inserted(el, bindings) {
        // console.log(222);
      },
    },
    focus: {
      bind(el, binds) {
        console.log("bind");
      },
      inserted(el, binds) {
        // el.focus()
        console.log("inserted");
      },
      // 数据更新时触发
      update(el, binds) {
        console.log("update");
      },
      // 数据更新完成时执行
      componentUpdated(el, binds) {
        console.log("componentUpdated");
      },
      // 指令与元素解绑时调用
      unbind(el, binds) {
        console.log("bind");
      },
    },
  },
};
</script>

<style lang="scss">
</style>
